<template>
  <el-dialog
    :title="!dataForm.roomId ? '新增' : '修改'"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
    <el-form-item label="房名称" prop="roomName">
      <el-input v-model="dataForm.roomName" placeholder="房名称"></el-input>
    </el-form-item>
    <el-form-item label="房地区省" prop="roomSheng">
      <el-input v-model="dataForm.roomSheng" placeholder="房地区省"></el-input>
    </el-form-item>
    <el-form-item label="房地区市" prop="roomShi">
      <el-input v-model="dataForm.roomShi" placeholder="房地区市"></el-input>
    </el-form-item>
    <el-form-item label="房地区县" prop="roomXian">
      <el-input v-model="dataForm.roomXian" placeholder="房地区县"></el-input>
    </el-form-item>
    <el-form-item label="户型" prop="roomModel">
      <el-input v-model="dataForm.roomModel" placeholder="户型"></el-input>
    </el-form-item>
    <el-form-item label="用户" prop="roomUid">
      <el-input v-model="dataForm.roomUid" placeholder="用户"></el-input>
    </el-form-item>
    <el-form-item label="介绍" prop="roomIntroduce">
      <el-input v-model="dataForm.roomIntroduce" placeholder="介绍"></el-input>
    </el-form-item>
    <el-form-item label="价格/平方" prop="roomPrice">
      <el-input v-model="dataForm.roomPrice" placeholder="价格/平方"></el-input>
    </el-form-item>
    <el-form-item label="面积" prop="roomArea">
      <el-input v-model="dataForm.roomArea" placeholder="面积"></el-input>
    </el-form-item>
    <el-form-item label="总价" prop="roomTotalprice">
      <el-input v-model="dataForm.roomTotalprice" placeholder="总价"></el-input>
    </el-form-item>
    <el-form-item label="1新房2二手房3租房" prop="roomState">
      <el-input v-model="dataForm.roomState" placeholder="1新房2二手房3租房"></el-input>
    </el-form-item>
    <el-form-item label="0不出售1出售" prop="sellState">
      <el-input v-model="dataForm.sellState" placeholder="0不出售1出售"></el-input>
    </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        dataForm: {
          roomId: 0,
          roomName: '',
          roomSheng: '',
          roomShi: '',
          roomXian: '',
          roomModel: '',
          roomUid: '',
          roomIntroduce: '',
          roomPrice: '',
          roomArea: '',
          roomTotalprice: '',
          roomState: '',
          sellState: ''
        },
        dataRule: {
          roomName: [
            { required: true, message: '房名称不能为空', trigger: 'blur' }
          ],
          roomSheng: [
            { required: true, message: '房地区省不能为空', trigger: 'blur' }
          ],
          roomShi: [
            { required: true, message: '房地区市不能为空', trigger: 'blur' }
          ],
          roomXian: [
            { required: true, message: '房地区县不能为空', trigger: 'blur' }
          ],
          roomModel: [
            { required: true, message: '户型不能为空', trigger: 'blur' }
          ],
          roomUid: [
            { required: true, message: '用户不能为空', trigger: 'blur' }
          ],
          roomIntroduce: [
            { required: true, message: '介绍不能为空', trigger: 'blur' }
          ],
          roomPrice: [
            { required: true, message: '价格/平方不能为空', trigger: 'blur' }
          ],
          roomArea: [
            { required: true, message: '面积不能为空', trigger: 'blur' }
          ],
          roomTotalprice: [
            { required: true, message: '总价不能为空', trigger: 'blur' }
          ],
          roomState: [
            { required: true, message: '1新房2二手房3租房不能为空', trigger: 'blur' }
          ],
          sellState: [
            { required: true, message: '0不出售1出售不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      init (id) {
        this.dataForm.roomId = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.roomId) {
            this.$http({
              url: this.$http.adornUrl(`/front/room/info/${this.dataForm.roomId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.roomName = data.room.roomName
                this.dataForm.roomSheng = data.room.roomSheng
                this.dataForm.roomShi = data.room.roomShi
                this.dataForm.roomXian = data.room.roomXian
                this.dataForm.roomModel = data.room.roomModel
                this.dataForm.roomUid = data.room.roomUid
                this.dataForm.roomIntroduce = data.room.roomIntroduce
                this.dataForm.roomPrice = data.room.roomPrice
                this.dataForm.roomArea = data.room.roomArea
                this.dataForm.roomTotalprice = data.room.roomTotalprice
                this.dataForm.roomState = data.room.roomState
                this.dataForm.sellState = data.room.sellState
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/front/room/${!this.dataForm.roomId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'roomId': this.dataForm.roomId || undefined,
                'roomName': this.dataForm.roomName,
                'roomSheng': this.dataForm.roomSheng,
                'roomShi': this.dataForm.roomShi,
                'roomXian': this.dataForm.roomXian,
                'roomModel': this.dataForm.roomModel,
                'roomUid': this.dataForm.roomUid,
                'roomIntroduce': this.dataForm.roomIntroduce,
                'roomPrice': this.dataForm.roomPrice,
                'roomArea': this.dataForm.roomArea,
                'roomTotalprice': this.dataForm.roomTotalprice,
                'roomState': this.dataForm.roomState,
                'sellState': this.dataForm.sellState
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>
